<template>
  <main class="main">
    <!-- 公共组件资源导航栏 -->
    <div>
      <div class="card_list">
        <div class="channel_list">
          <div class="list content-width left">
            <div class="channel_scroll">
              <router-link to="/source/member"
                           :class="navClickNum === 0 ? 'active' : ''"
                           class="channel_item"
                           @click="navClickGo(0)"
              >会员专区
              </router-link
              >
              <router-link to="/source/videoclass"
                           :class="navClickNum === 1 ? 'active' : ''"
                           class="channel_item"
                           @click="navClickGo(1)"

              >视频课
              </router-link
              >
              <router-link to="/source/liveclass"
                           class="channel_item"
                           :class="navClickNum === 2 ? 'active' : ''"
                           @click="navClickGo(2)"

              >直播课
              </router-link
              >
              <router-link to="/source/finishclass"
                           class="channel_item"
                           :class="navClickNum === 3 ? 'active' : ''"
                           @click="navClickGo(3)"

              >线下课
              </router-link
              >
              <router-link to="/source/theme"
                           class="channel_item"
                           :class="navClickNum === 4 ? 'active' : ''"
                           @click="navClickGo(4)"

              >主题
              </router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view/>
  </main>
</template>

<script lang="ts">
import {defineComponent} from "vue";



export default defineComponent({
  name: "Course",
});
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {reqRecommend} from "@/apis/source";

const router = useRouter();
//导航栏标识
let navClickNum = ref(0);

const navClickGo = (num: number) => {
  navClickNum.value = num;}



</script>

<style scoped lang="scss">
.main {
  min-height: 900px;
  margin-bottom: 65px;
  background-color: #f5f7f9;

  .card_list {
    .channel_list {
      //margin-bottom: 10px;
      width: 100%;
      background: #fff;
      text-align: center;
      height: 80px;
      line-height: 80px;
      color: #7d8090;
      font-size: 16px;
      overflow: hidden;

      .list {
        position: relative;
      }

      .content-width {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }

      .channel_scroll {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        width: 1000px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        .active {
          color: #111;
          border-bottom: 3px solid #000;
        }

        a {
          text-decoration: none;
          background: transparent;
          color: #111;
        }

        .channel_item {
          padding: 20px 4px;
          margin: 0 20px;
          text-align: center;
          user-select: none;
          cursor: pointer;
        }
      }
    }
  }

  .zone {
    background-color: #f5f7f9;
  }
}


</style>
